<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg width="400" height="400">
    <symbol id="greenSquare">
        <title>Title in Symbol</title>
        <rect width="50" height="50" fill="green">
            <title>Title in Rect</title>
        </rect>
    </symbol>
    <symbol id="blueSquare">
        <rect width="50" height="50" fill="blue">
            <title>Title in Rect</title>
        </rect>
    </symbol>
    <use x="100" y="100" xlink:href="#greenSquare"></use>
    <use x="200" y="100" xlink:href="#blueSquare"></use>
    <use x="300" y="100" xlink:href="#greenSquare">
        <title>Title in Use</title>
    </use>
</svg>
<script>
testTooltipText(125, 125, "Title in Symbol", "Tooltip title of title child under shadow root");
testTooltipText(225, 125, "", "Tooltip title without any first level title child under shadow root. Should return empty string");
testTooltipText(325, 125, "Title in Use", "Tooltip title under Use");

function testTooltipText(x, y, expectedText, description) {
    if (!window.eventSender || !window.testRunner)
        return;
    eventSender.dragMode = false;
    eventSender.mouseMoveTo(x,y);
    test(function () {
        assert_equals(testRunner.tooltipText, expectedText);
    }, description);
}
</script>